.multichain-product-tour-menu {
  width: 344px;
  // Removed hardcoded positioning to allow Popper.js to control placement
  // top: 10px !important;
  // left: -7px !important;

  &--rtl {
    left: 6px !important;
    right: 6px !important;
  }

  &__permissions-page-tour {
    left: auto !important; //important required for permissions page popup center alignment, overrides .multichain-product-tour-menu -7px left styling
    top: 0 !important; //important required for permissions page styling, since the anchorElement is inside Page Content
  }

  &__arrow,
  &__arrow::before {
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
  }

  &__arrow {
    width: 40px;
    height: 40px;
    visibility: hidden;
    top: 0;
    // Allow arrow positining via CSS variable
    left: var(--arrow-position, 20px);
  }

  &__arrow::before {
    display: block;
    background-color: inherit;
    visibility: visible;
    content: '';
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
    top: -7px;
  }

  &__header {
    position: relative;
  }

  &__previous-icon {
    position: absolute;
    left: 0;
    top: 0;
  }

  &__button {
    &:hover {
      color: var(--color-primary-default);
    }

    &:active {
      opacity: 0.5;
      background-color: var(--color-primary-inverse);
    }
  }
}
